<script setup lang="ts">
import {reactive, ref} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import { ElMessage, FormInstance } from 'element-plus';
import {
    addpsychologicalEvaluation,
    deletePsychometricAssessments, getPsychometricDetail, modifyPsychometric,
    psychologicalEvaluation
} from '@/api/interface/reuqest';
//搜索表单内容
const formInline = reactive({
    evaluation: '',
})
//展示数据声明
const tableData = ref([])
//首页展示
let psychologicalObj = ref({
    // name:string,
    pageSize: 10,
    pageNum: 1
})
let total = ref()

function getList() {
    psychologicalEvaluation(psychologicalObj.value).then((item) => {
        console.log(item)
        let psychologicalListObj = {}
        let statu = ''
        if (item.code === 200) {
            tableData.value = item.rows.map((value, index) => {
                if (value.enable === '是' || value.enable === '1') {
                    statu = '正常'
                } else if (value.enable === '否' || value.enable === '0') {
                    statu = '禁用'
                }
                psychologicalListObj = {
                    serial: index + 1,
                    evaluationName: value?.name,
                    creationTime: value?.createTime,
                    status: statu,
                    id:value.id,
                }
                return psychologicalListObj
            })
        }
        total.value = item.total
    })
}

getList();

//输入框
function handleChange() {
    psychologicalObj.value = {
        name: formInline.evaluation,
        pageSize: 10,
        pageNum: 1
    }
    getList();
}

//搜索框
function searchBox() {
    psychologicalObj.value = {
        name: formInline.evaluation,
        pageSize: 10,
        pageNum: 1
    }
    getList();
}

//重置
const formRef = ref<FormInstance>()
const reset = (formEl: FormInstance | undefined) => {
    psychologicalObj.value = {
        pageSize: 10,
        pageNum: 1
    }
    getList();
    if (!formEl) return
    formEl.resetFields()
}

//添加
const addVisible = ref(false)
const addForm = ref({
    name: '',
    enable:'是'
})
const addFormRef = ref<FormInstance>()
function addEvaluation() {
    addVisible.value = true
    //
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log(addForm);
            addpsychologicalEvaluation(addForm.value).then((res)=>{
                console.log(addForm.value);
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "添加成功",
                    });
                    getList();
                    addVisible.value = false
                    formEl.resetFields()
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

//详情
function detailsEvaluation(data) {

}

//编辑
let editVisible = ref(false);
const editForm = ref({
    id:'',
    name: '',
    enable:''
});
const editFormRef = ref<FormInstance>();
function editEvaluation(data) {
    editVisible.value = true;
    console.log(data);
    getPsychometricDetail(data.id).then((res)=>{
        if (res.code === 200) {
            editForm.value ={
                id:res.data.id,
                name: res.data.name,
                enable: res.data.enable,
            }
        }
    })
}
// submitEditForm
const submitEditForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(editForm.value);
            modifyPsychometric(editForm.value).then((res)=>{

                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "修改成功",
                    });
                    getList();
                    editVisible.value = false
                    formEl.resetFields();
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}


//删除
function delEvaluation(data) {
    deletePsychometricAssessments(data.id).then((res)=>{
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: "删除成功",
            });
            getList();
        }
    })
}

//分页器
let currentPage = ref<number>()

function handleCurrentChange(newPage) {
    psychologicalObj.value = {
        name: formInline.evaluation,
        pageSize: 10,
        pageNum: newPage
    }
    getList();
}
</script>

<template>

        <div class="box">
            <!--        头部-->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
                <el-form-item label="测试名称" prop="evaluation">
                    <el-input @input="handleChange" v-model="formInline.evaluation" placeholder="请输入测评" clearable/>
                </el-form-item>
                <el-form-item class="button">
                    <el-button type="primary" :icon="Search" @click="searchBox">搜索</el-button>
                    <el-button :icon="Refresh" @click="reset(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
            <!--        主体-->
            <div style="position: relative">
                <el-form-item>
                    <el-button type='primary' @click="addEvaluation">
                        添加
                    </el-button>
                </el-form-item>
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column prop="serial" label="序号" width="240" align="center"/>
                    <el-table-column prop="evaluationName" label="测评名称" width="300" align="center"/>
                    <el-table-column prop="creationTime" label="创建时间" width="300" align="center"/>
                    <el-table-column prop="status" label="状态" width="300" align="center"/>
                    <el-table-column prop="operation" label="操作" width="300" align="center">
                        <template #default="scope">
                            <router-link :to="{path:'/heartDetails',query:{id:scope.row.id}}">
                                <el-button link type="primary" size="small">
                                    详情
                                </el-button>
                            </router-link>
                            <el-button link type="primary" size="small" @click="editEvaluation(scope.row)">
                                编辑
                            </el-button>
                            <router-link :to="{path:'/setupmgnt',query:{id:scope.row.id}}">
                                <el-button link type="primary" size="small">
                                    设置
                                </el-button>
                            </router-link>

                            <el-button link type="primary" size="small" @click="delEvaluation(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--            分页器-->
                <el-pagination background layout="prev, pager, next" class="page" :default-page-size=10
                               :total='total' :current-page.sync="psychologicalObj.pageNum"
                               @current-change="handleCurrentChange"/>
            </div>
            <!--        添加测评框-->
            <el-dialog
                v-model="addVisible"
                title="添加"
                width="350"
            >
                <el-form :model="addForm" label-width="auto" style="max-width: 600px" ref="addFormRef">
                    <el-form-item label="测试名称" prop="name" :rules="[{ required: true, message: '请输入内容！' }, { min: 1, message: '内容不能为空' }]">
                        <el-input
                            v-model="addForm.name"
                            style="width: 240px"
                            maxlength="20"
                            placeholder="请输入测评名称"
                            show-word-limit
                            type="text"
                            clearable
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="状态" prop="enable">
                        <el-radio-group v-model="addForm.enable">
                            <el-radio  label='1'>正常</el-radio>
                            <el-radio  label='0'>停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer" style='text-align: center'>
                        <el-button @click="addVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm(addFormRef)">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <!--        编辑测评模态框-->
            <el-dialog
                v-model="editVisible"
                title="编辑"
                width="350"
            >
                <el-form :model="editForm" label-width="auto" style="max-width: 600px" ref="editFormRef">
                    <el-form-item label="测试名称" prop="name" :rules="[{ required: true, message: '请输入内容！' }, { min: 1, message: '内容不能为空' }]">
                        <el-input
                            v-model="editForm.name"
                            style="width: 240px"
                            maxlength="20"
                            placeholder="请输入测评名称"
                            show-word-limit
                            type="text"
                            clearable
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="状态" prop="enable">
                        <el-radio-group v-model="editForm.enable">
                            <el-radio  label='1'>正常</el-radio>
                            <el-radio  label='0'>停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer" style='text-align: center'>
                        <el-button @click="editVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitEditForm(editFormRef)">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>


</template>

<style scoped lang="scss">
.box {
    margin-bottom: 30px;
    padding: 30px;
}

.page {
    //margin-top: 20px;
    //margin-left: 1000px;
    position: absolute;
    //top: 20px;
    bottom: -50px;
    right: 10px;
}

::v-deep(.el-input__wrapper) {
    width: 200px;
}

::v-deep(.el-dialog__header){
    position: relative;
    background-color: #1892FF;
    .el-dialog__headerbtn{
        height: 54.67px;
        position: absolute;
        top:0px;
        right: -16px;
        background-color: #1892FF;
        svg{
            color: white;
        }
    }
    span{
        color: #FFFFFF;
    }
}
</style>
